<template>
  <div class="search-bar-fixed">
    <div class="search-bar">
      <!-- 左侧黑猫投诉 Logo -->
      <van-image class="logo" src="/logo3.png" fit="contain" />

      <!-- 右侧搜索输入框 -->
      <van-search
        class="search-input"
        placeholder="输入关键词搜索"
        shape="round"
        left-icon="search"
        :border="false"
      />
    </div>
  </div>
</template>

<script setup>
import {  Image as VanImage } from "vant";


</script>

<style lang="scss" scoped>
.search-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #f5f5f5; 
}

.search-bar {
    height: 60px;
  /* 横向布局 */
  display: flex;   
  /* 垂直居中 */
  align-items: center;  
  /* 白色背景 */
  background-color: #f5f5f5;  
  /* 内边距 */
  padding: 0 12px;   
}

.logo {
  width: 90px;
  height: 50px;
  margin-right: 4px;
}

.search-input {
/* 让搜索框占满剩余宽度 */
  flex: 1;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);

  --van-search-padding: 0;
  
  .van-search__content {
    background-color: #fff;
  }
}
</style>
